<!--  -->
<template>
  <div class="login-page">
    <div class="login-box">
      <h2>登录</h2>
      <el-form :model="form" :rules="rules" ref="form">
        <div class="user-box">
          <el-form-item prop="phone">
            <el-input v-model="form.phone" placeholder="账号"></el-input>
          </el-form-item>
        </div>
        <div class="user-box">
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              type="password"
              show-password
              placeholder="密码"
              @keyup.enter.native="handleLogin"
            >
            </el-input>
          </el-form-item>
        </div>
        <el-button class="login-btn" :loading="loading" @click="handleLogin">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          登录
        </el-button>
      </el-form>
    </div>
    <footer class="page-footer">
      <a href="https://oa.xiaoxi.work/register" target="_blank"> 👉去注册 </a>
    </footer>
  </div>
</template>

<script>
import { qiankunActions } from "@/qiankun/globalState";
export default {
  name: "BaseLogin",
  data() {
    return {
      form: {
        phone: "15000000002",
        password: "123456",
      },
      rules: {
        phone: [
          {
            required: true,
            message: "",
            trigger: ["blur"],
          },
          {
            len: 11,
            message: "",
            trigger: ["input", "blur"],
          },
        ],
        password: [
          {
            required: true,
            trigger: ["blur"],
          },
          {
            min: 6,
            max: 20,
            trigger: ["blur"],
          },
        ],
      },
      loading: false,
      redirect: undefined,
    };
  },
  methods: {
    handleLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/customLogin", this.form)
            .then((res) => {
              this.loading = false;
              // this.$router.replace("/");
              this.$router.replace({path: this.redirect || "/"})
            })
            .catch((err) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
  },

  created() {
    // 重定向地址
    this.redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : undefined;
  },
  mounted() {
    // console.log(qiankunActions);
  },
};
</script>
<style lang="less" scoped>
.login-page {
  width: 100vw;
  height: 100vh;
  font-family: sans-serif;
  background: linear-gradient(#141e30, #243b55);
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    h2 {
      margin: 0 0 30px;
      padding: 0;
      color: #fff;
      text-align: center;
    }
    .user-box {
      position: relative;
      ::v-deep .el-input__inner {
        width: 100%;
        padding: 10px 0;
        height: 28px;
        font-size: 16px;
        color: #fff;
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid #fff;
        outline: none;
        background: transparent;
        border-radius: 0px;
      }
      .login-input {
        &:focus ~ label,
        &:valid ~ label {
          top: -20px;
          left: 0;
          color: #03e9f4;
          font-size: 12px;
        }
      }
      .is-error {
        ::v-deep .el-input__inner {
          border-bottom: 1px solid #f56c6c;
        }
      }
      label {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        pointer-events: none;
        transition: 0.5s;
      }
    }
    .login-btn {
      position: relative;
      display: inline-block;
      padding: 10px 20px;
      color: #03e9f4;
      font-size: 16px;
      text-decoration: none;
      text-transform: uppercase;
      overflow: hidden;
      transition: 0.5s;
      margin-top: 40px;
      letter-spacing: 4px;
      background: none;
      border: none;
      &:hover {
        background: #03e9f4;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
          0 0 100px #03e9f4;
      }
      span {
        position: absolute;
        display: block;
        &:nth-child(1) {
          top: 0;
          left: -100%;
          width: 100%;
          height: 2px;
          background: linear-gradient(90deg, transparent, #03e9f4);
          animation: btn-anim1 1s linear infinite;
        }
        &:nth-child(2) {
          top: -100%;
          right: 0;
          width: 2px;
          height: 100%;
          background: linear-gradient(180deg, transparent, #03e9f4);
          animation: btn-anim2 1s linear infinite;
          animation-delay: 0.25s;
        }
        &:nth-child(3) {
          bottom: 0;
          right: -100%;
          width: 100%;
          height: 2px;
          background: linear-gradient(270deg, transparent, #03e9f4);
          animation: btn-anim3 1s linear infinite;
          animation-delay: 0.5s;
        }
        &:nth-child(4) {
          bottom: -100%;
          left: 0;
          width: 2px;
          height: 100%;
          background: linear-gradient(360deg, transparent, #03e9f4);
          animation: btn-anim4 1s linear infinite;
          animation-delay: 0.75s;
        }
      }
    }
  }
  .page-footer {
    position: fixed;
    right: 10px;
    bottom: 20px;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.65);
    a {
      display: flex;
      align-items: center;
      margin-left: 4px;
      text-decoration: none;
      color: black;
    }
  }
}
::v-deep .el-form-item {
  margin-bottom: 0px;
  .el-form-item__error {
    display: none;
  }
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
</style>
